<div>
	<!-- widget content -->
	<div class="widget-body">

		<form action="" method="post" id="checkout-form" class="smart-form">
			<header>
				<h2>
					集群新增
					<button class="close" data-dismiss="modal">x</button>
				</h2>

			</header>
			<fieldset>
				<div id="dialog-alert"></div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>所属区域</label>
					<section class=" col col-8">
						<select id="area" name="area">
						</select>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>集群名称</label>
					<section class="col col-8">
						<label class="input"> <input type="text" id="name"
							name="name" placeholder=" 请输入集群名称" class="required">
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>网络标签</label>
					<section class="col col-8">
						<label class="input"> <input type="text" id="haNetworkTag"
							name="haNetworkTag" placeholder=" 请输入网络标签" class="required">
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>混合类型</label>
					<section class=" col col-8">
						<select id="mixed" name="mixed">
						</select>
					</section>
				</div>
				<div class="row" id="softdiv">
					<label class="label col col-3"><label style="color: red">*</label>包含软件</label>
					<section class=" col col-8">
						<label class="select select-multiple"> <select
							class="required" id="definitionSubServs"
							name="definitionSubServs" multiple="multiple"
							placeholder="选择软件...">

						</select>
						</label>
					</section>
				</div>
				<div class="row" id="netdiv">
					<label class="label col col-3"><label style="color: red">*</label>网段</label>
					<section class=" col col-8">
						<label class="select select-multiple"> <select
							class="required" id="networkings" name="networkings"
							multiple="multiple" placeholder="选择网段...">

						</select>
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>最大使用率</label>
					<section class="col col-8">
						<label class="input"> <input type="text" id="maxUsage"
							name="maxUsage" placeholder=" 请输入最大使用率" class="required digits">
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>最大主机数量</label>
					<section class="col col-8">
						<label class="input"> <input type="text" id="maxHostCount"
							name="maxHostCount" placeholder=" 请输入最大主机数量"
							class="required  digits">
						</label>
					</section>
				</div>
				<div style="display: none;">
					<input type="text" name="site" id="site" value="">
				</div>
			</fieldset>
		</form>


	</div>
	<!-- end widget content -->

</div>
<div class="modal-footer">

	<button type="button" class="btn btn-default btn-sm"
		data-dismiss="modal">取消</button>
	<button type="button" class="btn btn-primary btn-sm" id="submitbtn">
		保存</button>
</div>
<script>
	//请求表单中的内容-如select并填充到页面  definitionSubServs
	s = $("#jqgrid").jqGrid('getGridParam', 'selarrrow');
    var clusterid = $("#jqgrid").jqGrid('getRowData',s).id;
    
    var area,$area;
    var mixed,$mixed;
    var software,$software;
    var networking,$networking;
    
    pageSetUp();
    var clusterID;
    var pagefunction = function() {
        var errorClass = 'invalid';
        var errorElement = 'em';
        
        var siteid=getSession("siteId");
        $mixed = $("#mixed").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'text'},
    		options: [{id: 0, text: "false"}, {id: 1, text: "true"}]
    	});
    	$area = $("#area").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'text'},
    		options: []
    	});
    	$software = $("#definitionSubServs").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'text'},
    		options: []
    	});
    	$networking = $("#networkings").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'text'},
    		options: []
    	});
    	
    	sendGet("/upm_manager/v1.0/selections/areas?site="+siteid+"&enabled=1",fillSelect,DialogAlert,null);
    	sendGet("/upm_manager/v1.0/selections/softwares?site="+siteid+"&enabled=1",fillSelect_soft,DialogAlert,null);
    	sendGet("/upm_manager/v1.0/selections/networkings/unused?site="+siteid+"&enabled=1",fillSelect_net,DialogAlert,null);
        
        var option = {
            errorClass		: errorClass,
            errorElement:errorElement,
            highlight: function(element) {
                $(element).parent().removeClass('state-success').addClass("state-error");
                $(element).removeClass('valid');
            },
            unhighlight: function(element) {
                $(element).parent().removeClass("state-error").addClass('state-success');
                $(element).addClass('valid');
            },
            // Rules for form validation
            // Messages for form validation
            messages:{
            	maxHostCount : {
                    required : '请输入最大主机数量',
                    digits:'请输入正确的数字'
                },
                name : {
                    required : '请输入集群名称'
                },
                haNetworkTag : {
                    required : '请输入网络标签'
                },
                maxUsage : {
                    required:'请输入最大使用率',
                    digits:'请输入正确的数字'
                }
            },
            errorPlacement : function(error, element) {
                if($(element).next("div").hasClass("tooltip")) {
                    $(element).attr("data-original-title", $(error).text()).tooltip("show");
                } else {
                    $(element).attr("title",
                            $(error).text()).tooltip("show");
                }
            },
            submitHandler:function(form){
            	var softFlg = check_soft();
            	var netFlg = check_net();
                if(softFlg && netFlg){
                	//在这里生成需要提交的json数据
                	var data=$('#checkout-form').serializeArray();
                	data[3].value = data[3].value == 0 ? false : true;
                	var jsonData=arrayToString(data);
                	//在这里调用ajax方法提交
                	sendPost("/upm_manager/v1.0/clusters", postSuccess,DialogAlert,jsonData,null);
                }
            }
        };
        $('#checkout-form').validate(option);
    };

    loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);

    $('#submitbtn').click(function() {
    	DialogAlertClear();
    	$('#checkout-form').submit();
    });
    function postSuccess(data){
    	$("#addModal").modal('toggle');
    	sendGet("/upm_manager/v1.0/clusters?site="+getSession("siteId"),reloadGrid,ListAlert,null);
    }
    
    function fillSelect(data){
		area = $area[0].selectize;
		area.clearOptions();
    	$.each(data, function(k, v){
    		area.addOption(v);
    	});
    }
    function fillSelect_soft(data){
		software = $software[0].selectize;
		software.clearOptions();
    	$.each(data, function(k, v){
    		software.addOption(v);
    	});
    }
    function fillSelect_net(data){
    	if(data.length == 0){
    		DialogAlert("无可用网段");
    		return;
    	}
		networking = $networking[0].selectize;
		networking.clearOptions();
    	$.each(data, function(k, v){
    		networking.addOption(v);
    	});
    }
    
    function check_soft(){
    	if($("#definitionSubServs").find("option:selected").length == 0){
    		DialogAlert("软件未选择");
    		return false;
    	}
    	if($("#mixed").find("option:selected").length == 0){
    		DialogAlert("混合类型未选择");
    		return false;
    	}
    	return true;
    }
    function check_net(){
    	if($("#networkings").find("option").length == 0){
    		DialogAlert("无可用网段");
    		return false;
    	}
    	if($("#networkings").find("option:selected").length == 0){
    		DialogAlert("网段未选择");
    		return false;
    	}
    	return true;
    }
</script>
